<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <!-- 1. 模板 -->
    <div id="app">{{ message }}</div>

    <!-- 2. 引入 Vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <script>
      const { createApp, ref } = Vue;

      // 3. createApp 函数：创建一个应用实例。传入 根组件 或者 根组件选项
      const app = createApp({
        // 4. setup 函数：Vue3 组合式 API 的入口
        setup() {
          // 6. ref 函数：接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value
          const message = ref("Hello vue!");
          // 7. 验证 ref 对象是响应式的
          setTimeout(() => (message.value = "编程段子"), 1000);
          return {
            message,
          };
        },
      });
      // 5. mount 函数：将应用实例挂载在一个容器元素中。容器元素的 `innerHTML` 将被用作模板
      app.mount("#app");

      /*
      执行顺序：
      1. 显示未编译的 `{{ message }}`；
      2. 创建应用实例，并通过 setup 返回响应式数据 `mssage`；
      3. 将 `#app` 的 `innerHTML` 作为模板进行挂载并渲染；
      4. 间隔 3000 毫秒，数据变化驱动模板更新

      从示例中，必须要理解的概念有：
        应用实例
        setup 入口
        挂载到容器元素
        模板
        ref 响应式数据
      */
    </script>
  </body>
</html>
